import React from 'react'
import {Form, InputNumber} from 'antd'


interface IProps {
  data?: any
  onChange?: (v: any) => void
}

const ConfigForm: React.FC<IProps> = (props: IProps) => {
  const {data, onChange} = props
  const [form] = Form.useForm();
  const validateMessages = {
    number: {
      range: '${min}~${max}',
    },
  };
  const onFormChange = async () => {
    try {
      const values: any =  await form.validateFields()
        if (onChange) {
          onChange(values)
        }
    } catch (errorInfo) {
    }
  };
  return (
    <Form form={form} name="nest-messages" validateMessages={validateMessages}>
      <Form.Item name='width' label="宽" rules={[{type: 'number', min: 0, max: 100}]} initialValue={data && data.width}>
        <InputNumber onChange={onFormChange}/>
      </Form.Item>
      <Form.Item name='height' label="高" rules={[{type: 'number', min: 0, max: 100}]}
                 initialValue={data && data.height}>
        <InputNumber onChange={onFormChange}/>
      </Form.Item>

    </Form>
  )
}
export default ConfigForm
